<template>
	<div class="box">
		<h5>秒杀活动 / 课程设置</h5>
		<button id="screening" @click="goto()">返回</button>
		<div class="nav">
			<h4>秒杀时段列表</h4>
			<button id="screening_one" @click="gotos()">添加时段</button>
		</div>
		<div class="middle"></div>
	<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark"  class="box_table" typeof="index">
		<el-table-column  width="55">
			<input type="checkbox" name="01" checked="checked" class="front">
		</el-table-column>
		<el-table-column label="场次编号" width="120">
			<template #default="scope">
				<span>{{ scope.$index + 1}}</span>
			</template>
		</el-table-column>
		<el-table-column prop="name" label="场次名称" width="120">
			<template #default="scope">
				<span>{{ scope.row.title }}</span>
			</template>
		</el-table-column>
		<el-table-column prop="address" label="每日开始时间" show-overflow-tooltip>
			<template #default="scope">
				<span>{{ scope.row.end_tim }}</span>
			</template>
		</el-table-column>
		<el-table-column prop="address" label="每日结束时间" show-overflow-tooltip>
			<template #default="scope">
				<span>{{ scope.row.start_tim }}</span>
			</template>
		</el-table-column>
		<el-table-column prop="address" label="课程数量" show-overflow-tooltip>
			<template #default="scope">
				<span>{{ scope.row.num }}</span>
			</template>
		</el-table-column>
		<el-table-column label="操作" show-overflow-tooltip>
			<template #default="scope">
				<el-button size="small" class="but_view">查看</el-button>
				<el-button size="small" @click="handleEdit(scope.$index, scope.row)" class="but_Modify">修改
				</el-button>
				<!-- <el-button size="small" @click="gotos()" class="but_Modify">修改</el-button> -->
				<!-- <button size="small" type="danger" @click="DelUsers(index) promCoupon()">删除</button> -->
				<el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)"
					class="but_delete">删除</el-button>
				<!-- <el-button @click="remove(scope.row.id)" title="删除" type="danger" size="mini" :disabled="scope.row.type == -1">删除</el-button> -->
			</template>
		</el-table-column>
	</el-table>
	<!-- 弹出层 -->
	<el-dialog v-model="dialogFormVisible" title="修改" id="Pop-up">
		<el-form>
			<el-form-item label="活动编号" :label-width="formLabelWidth" class="item">
				<el-input v-model="editObj.id" autocomplete="off" disabled />
			</el-form-item>
			<el-form-item label="场次名称" :label-width="formLabelWidth" class="item">
				<el-input v-model="editObj.title" autocomplete="off" />
			</el-form-item>
			<el-form-item label="每日开始时间" :label-width="formLabelWidth" class="item">
				<el-input v-model="editObj.end_tim" autocomplete="off" />
			</el-form-item>
			<el-form-item label="每日结束时间" :label-width="formLabelWidth" class="items">
				<el-input v-model="editObj.start_tim" autocomplete="off" />
			</el-form-item>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="edit(edit_index, editObj)" class="but">确定</el-button>
				<el-button type="primary" @click="dialogFormVisible = false" class="but">取消</el-button>
			</span>
		</template>
	</el-dialog>
</div>
</template>

<script>
	import { ref } from 'vue'
	import { Timer } from '@element-plus/icons-vue'
	import { promKill, delPromKill, editPromKill } from '../api/api.js'
	export default {
		name: 'cao',
		setup() {
			const tableData = ref([])
			const dialogFormVisible = ref(false)
			const formLabelWidth = '140px'
			const editObj = ref({})
			
			const edit_index = ref(0)
			
			
			return {
				tableData,
				dialogFormVisible,
				editObj,
				edit_index
			}
		},
		mounted() {
			this.promKill();
		},
		methods: {
			promKill() {
				promKill().then(res => {
					console.log(res);
					let _data = res.data.list;
					this.tableData = _data;
					console.log(this.tableData[0]);
				}).catch(err => {
					console.log(err);
				})
			},
			goto() {
				this.$router.push('/Seconds')
			},
			gotos() {
				this.$router.push('/add')
			},
			handleDelete(index, row) {
				this.$emit('del', row);
				delPromKill(row)
					.then(res => {
						console.log(res)
						this.promKill()
					})
					.catch(err => {
						console.log(err)
					})
			},
			handleEdit(index, row) {
				//console.log(index, row)
				/* 
					index: 索引值
					row: 当前的数据
				*/
				this.dialogFormVisible = true;
				this.editObj = row;
				this.edit_index = index;
			},
			edit(index, row) {
				// console.log(row);
				// // this.tableData[index] = row;
				// console.log(this.tableData[index].id);
				//发送请求
				editPromKill(row)
					.then(res => {
						console.log(res);
						//调用重新渲染
						alert(res.data.msg);
					})
					.catch(err => {
						console.log(err);
					})
				this.dialogFormVisible = false;
			}
		}
	}
</script>
<style>
	.front {
		width: 15px;
		height: 15px;
	}
	.middle{
		width: 100%;
		height: 25px;
		background-color: white;
		border-top: 1px solid #f0f0f0;
		border-bottom: 1px solid #f0f0f0;
	}
	h5{
		display: inline-block;
	}
	.nav>h4{
		margin: 20px 0;
		display: inline-block;
	}
	#screening{
		float: right;
		/* margin: 13px 25px; */
		margin-top: -1px;
		width: 70px;
		height: 30px;
		background-color: #38a28a;
		border: none;
		border-radius: 5px;
		text-align: center;
		color: white;
	}
	#screening_one{
		float: right;
		margin: 13px 25px;
		width: 80px;
		height: 40px;
		background-color: #38a28a;
		border: none;
		border-radius: 5px;
		text-align: center;
		color: white;
	}
	.box{
	width: calc(100% - 60px);
	background-color: #f0f0f0;
	padding: 35px 30px;
	}
	h6{
		color: black;
		float: left;
	}
	.box>.box_table{
		width: 100%;
		height: 100vh;
	}
	.nav{
		width: calc(100% - 60px);
		margin-top: 30px;
		padding: 0 30px;
		background-color: white;
		color: black;
		margin-bottom: 20px;
		overflow: hidden;
	}
	
	*{
		margin: 0;
		padding: 0;
		list-style: none;
		text-align: left;
	}
</style>
<style>
	@import "../assets/el-input.css";
</style>